import React, { Component } from 'react';


/* 
  React 元素的实际处理和DOM元素的很相似,但是由一点语法上的不同;

  -React 实际的命名采用小驼峰式(camelCase),而不是纯小写.
  -使用JSX语法时你需要传入一个函数作为实际处理函数,而不是一个字符串
*/
class App extends Component {
  handleClick=(e)=>{
    console.log("2 执行react合成事件",e)
  }
  //与 vue mounted 作用类似  生命周期函数-触发时优先执行
  componentDidMount(){
    document.getElementById("btn").addEventListener("click",function (e) {
        e.stopPropagation();//阻止冒泡--后,绑定的合成事件上的handleClick方法无法被触发
        console.log("1 执行原生事件",e)
    })
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick} id="btn">+</button>
      </div>
    );
  }
}

export default App;
